import { memo, forwardRef } from 'react';
import Tooltip from '../Tooltip';
import type { Props } from './interface';

import styles from './index.module.scss';

/**
 * 按钮
 */
function Button(props: Props, ref) {
  const { className, children, reason, disable, onClick = () => {} } = props;

  return (
    <Tooltip title={disable ? reason : ''}>
      <div x-class={[styles.button, { [styles.disable]: disable }, className]} ref={ref} onClick={onClick}>
        {children}
      </div>
    </Tooltip>
  );
}

/**
 * 按钮
 */
export default memo(forwardRef(Button));
